<script>
    import { onMount } from 'svelte';
    import tabs from '../../assets/tabs.json'

    let activeTab = ''
    onMount(() => {
        activeTab = location.hash.split('#/').join('')
        activeTab = activeTab ? activeTab : tabs[0].code
        location.hash = '#/' + activeTab;
    })

    function tabActive(code) {
        activeTab = code
        location.hash = '#/' + activeTab;
    }
</script>
<main>
  <div class="tab-content">
    {#if activeTab === 'setting'}
      <slot name="setting">setting</slot>
    {:else if activeTab === 'message'}
      <slot name="message">message</slot>
    {:else}
      <slot name="map">map</slot>
    {/if}
  </div>
  <ul class="tabs">
    {#each tabs as tab}
      <li
        on:click={() => { tabActive(tab.code) }}
        class="{ tab.code === activeTab ? 'active': '' }">
        <img src="{tab.code === activeTab ? `./imgs/tab-${tab.icon}-active.png` : `./imgs/tab-${tab.icon}.png`}">
        { tab.name }
      </li>
    {/each}
  </ul>
</main>
<style lang="scss">
$tab-height: 3.6rem;
main {
  width: var(--percent100);
  height: var(--percent100);
  display: flex;
  flex-direction: column;
}
.tab-content {
  flex-grow: 1;
}
.tabs {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  padding: 0;
  li {
    height: $tab-height;
    line-height: $tab-height;
    color: rgb(112,112,112);
    flex-grow: 1;
    text-align: center;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    cursor: pointer;
    img {
      width: 1.3rem;
    }
    &:last-child{
      border-right: none;
    }
    &.active {
      color: var(--active-color);
    }
  }
}
</style>